<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交班级信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        #app {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin: 10px 0 5px;
            font-size: 14px;
            color: #333;
        }

        input[type="text"] {
            width: 100%;
            padding: 8px;
            margin: 5px 0 15px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }

        button {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .error {
            color: red;
            font-size: 14px;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>提交班级信息</h1>
    <label for="gradeId">ID:</label>
    <input type="text" id="gradeId" placeholder="请输入班级ID">

    <label for="gradeName">班级名称:</label>
    <input type="text" id="gradeName" placeholder="请输入班级名称">

    <button onclick="submitData()">提交</button>

    <div class="error" id="errorMessage" style="display: none;">请填写所有字段!</div>
</div>

<script>
        // 提交数据的函数
        function submitData() {
            var gradeId = document.getElementById('gradeId').value;
            var gradeName = document.getElementById('gradeName').value;

            // 判断输入是否为空
            if (!gradeId || !gradeName) {
                document.getElementById('errorMessage').style.display = 'block';
                return;
            }

            // 隐藏错误信息
            document.getElementById('errorMessage').style.display = 'none';

            // 创建Ajax请求
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "grade/add?gradeId=" + encodeURIComponent(gradeId) + "&gradeName=" + encodeURIComponent(gradeName), true);

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 请求成功后的操作
                    console.log("请求成功:", xhr.responseText);
                    data = JSON.parse(xhr.responseText)
                    flag = data.flag
                    if(flag){
                     alert("操作成功，正在跳转到首页...");
                    window.location.href = 'gradeList.html'
                    }else{
                        alert("操作失败，正在跳转到首页...");
                    window.location.href = 'gradeList.html'
                    }
                } else if (xhr.readyState == 4) {
                    // 请求失败后的操作
                    console.log("请求失败:", xhr.status);
                    alert("提交失败，请稍后重试！");
                }
            };

            // 发送请求
            xhr.send();
        }
    </script>
</body>
</html>
